<template>
  <view class="healthRecords-home">
    <view class="healthRecords-con">
      <view class="healthRecords-w flex justify-end">
        <text class="healthRecords-title-text" @click="toBack">跳过</text>
      </view>
      <view class="healthRecords-title healthRecords-w">
        请输入您的个人信息
      </view>
      <view class="healthRecords-selec flex justify-between healthRecords-w">
        <view class="healthRecords-li flex flex-direction justify-center align-center"
          v-for="(item,index) in refundRadiu" :key="index" @click="tabRadioSel(item,index)">
          <view class="healthRecords-img" :class="{secActive:finex ===index}">
            <image class="healthRecords-li-img" :src="item.imgSrc" mode=""></image>
          </view>
          <view class="healthRecords-textcon">
            <text class="text-xll margin-right-xs" :class="item.select?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
            <text class="text-font-style">{{item.sex}}</text>
          </view>
        </view>
      </view>
      <!-- 表单 -->
      <view class="healthRecords-form flex flex-direction align-center">
        <input type="text" class="hea-inpuStyle" v-model="fromData.age" placeholder="年龄 (岁)" placeholder-class="inputPlace"/>
        <input type="text" class="hea-inpuStyle" v-model="fromData.height" placeholder="身高 (cm)" placeholder-class="inputPlace" />
        <input type="text" class="hea-inpuStyle" v-model="fromData.weight" placeholder="体重 (kg)" placeholder-class="inputPlace" />
      </view>
      <view class="healthRecords-title healthRecords-w">
        您的饮食习惯
      </view>
      <view class="healthRecords-ul healthRecords-w flex justify-between">
        <view class="healthRecords-li flex  align-center flex-direction" v-for="(item,index) in eatingData" :key="index" :class="{heaActive : healthRecordsIndex == index}" @click="healthSec(index)">
           <view class="hear-kw" :class="{heaFontActive:healthRecordsIndex == index}">{{item.title}}</view>
           <view>
             <text class="hear-child" :class="{heaFontActive:healthRecordsIndex == index}">{{ item.text }}</text>
           </view>
        </view>
      </view>
    </view>
    <view class="healthRecords-btn flex justify-center align-center" @click="toRouter('/pages/health/healthManage/healthManage')">提交</view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  const finex = ref(-1)
  const healthRecordsIndex = ref(-1)
  const fromData = ref({
    age: '',
    height: '',
    weight: ''
  })
  const refundRadiu = ref([
    {
      id: 0,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg18.png',
      sex: '女性',
      select: false
    },
    {
      id: 1,
      imgSrc: 'https://cdn-static.yekjx.com/food/images/hel_bg17.png',
      sex: '男性',
      select: false
    }
  ])
  
  const eatingData = ref([
    {
      id : 0,
      title : '口味',
      text:'干净好吃才是硬道理'
    },
    {
      id : 1,
      title : '医疗',
      text:'三高人群调理'
    },
    {
      id : 2,
      title : '主题',
      text:'瘦身/地中海/月子餐/少儿成长'
    }
  ])
   
  

  const tabRadioSel = (list : any, index : any) => {
    finex.value = index
    refundRadiu.value.forEach((item) => {
      if (item.id === list.id) {
        // 将当前项的menuFlag设置为true
        item.select = true
        console.log(item.id)
      } else {
        // 将其他项的menuFlag设置为false（或不设置，根据你的需求）
        item.select = false;
      }
    });
  }
  
  const healthSec = (index:any) => {
    healthRecordsIndex.value = index
  }
  
  const toRouter = (url) => {
    uni.setStorageSync('nohealth', 1);
    uni.navigateTo({
      url
    })
  }
  
  const toBack = () => {
     uni.navigateBack();
  }
  
</script>

<style lang="scss">
  page {
    background-color: #FFFFFF;
  }
  .healthRecords-home{
   padding-bottom: 60rpx;
  }
  .cuIcon-round {
    color: #999;
  }

  .cuIcon-roundcheckfill {
    color: #56BF7A;
  }

  .secActive {
    background-image: linear-gradient(180deg, #E2ECFF 0%, rgba(255, 255, 255, 0.00) 100%) !important;
  }
  .healthRecords-btn{
    margin: 100rpx auto 0rpx;
    width: 654rpx;
    height: 50px;
    flex-shrink: 0;
    border-radius: 16rpx;
    background: #53A87F;
    color: #FFF;
    text-align: center;
    font-family: "Microsoft YaHei UI";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .heaActive{
    border: 1px solid #53A87F !important;
    background: rgba(228, 248, 228, 0.50) !important;
  }
  .heaFontActive{
    color: #53A87F !important;
  }
  .healthRecords-ul{
    padding-top: 68rpx;
    .healthRecords-li{
      width: 204rpx;
      height: 176rpx;
      flex-shrink: 0;
      border-radius: 20rpx;
      background: #F6F7FB;
      border: 1px solid #F6F7FB;
      justify-content: space-evenly;
      .hear-kw{
        color: #6B7082;
        text-align: center;
        font-feature-settings: 'dlig' on;
        font-family: "Microsoft YaHei UI";
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; /* 19.2px */
        margin-top: 2rpx;
      }
      .hear-child{
        color: #999;
        text-align: center;
        font-family: "Microsoft YaHei UI";
        font-size: 24rpx;
        width: 166rpx;
        display: block;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
  }
  .healthRecords-form{
    .hea-inpuStyle{
      width:616.4rpx;
      height:113.282rpx;
      flex-shrink: 0;
      border-radius: 68rpx;
      background: #F6F7FB;
      text-align: left;
      margin-bottom: 54rpx;
      padding-left: 40rpx;
    }
  }
  .inputPlace{
    color: #6B7082;
    font-feature-settings: 'dlig' on;
    font-family: "Microsoft YaHei UI";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
  }
  .healthRecords-w {
    width: 654rpx;
    margin: 0 auto;
  }

  .healthRecords-title {
    text-align: center;
    color: #666;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Microsoft YaHei UI";
    font-size: 40rpx;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 30px */
  }

  .healthRecords-title-text {
    padding: 24rpx 0 52rpx 0;
    color: #999;
    text-align: center;
    font-feature-settings: 'dlig' on;
    font-family: "Microsoft YaHei UI";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 19.2px */
  }

  .healthRecords-selec {
    padding: 40rpx 20rpx 60rpx 20rpx;
  }

  .healthRecords-li {
    .text-font-style {
      color: #333;
      text-align: center;
      font-feature-settings: 'dlig' on;
      font-family: "Microsoft YaHei UI";
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 120%;
      /* 19.2px */
      margin-right: 20rpx;
    }

    .healthRecords-textcon {
      margin-top: 35rpx;
    }

    .healthRecords-img {
      width: 216rpx;
      height: 216rpx;
      background-color: #fff;
      border: 1px solid #E0E0E0;
      border-radius: 50%;
      margin-bottom: 14rpx;
      position: relative;
      transition: all .5s;

      .healthRecords-li-img {
        width: 210rpx;
        // margin-top: 35rpx;
        height: 210rpx;
      }
    }
  }
  
</style>